<template>
  <div>
    <div class="sub">
      <van-icon name="arrow-left" class="lf" @click="iconClick" />
      <h5 class="cn">登录页面</h5>
      <p class="rg"></p>
    </div>
    <header>
      <div class="left">
        <van-icon name="cross" @click="back" />
      </div>
      <div class="right">
        <p>忘记密码</p>
      </div>
    </header>
    <section>
      <h3>密码登陆</h3>
      <!-- 表单部分 -->
      <van-form validate-first>
        <van-field
          v-model="username"
          name="账号"
          :rules="[
            {
              pattern,
              message:
                '账号必须字母开头，长度在5~18之间，只能包含字母、数字和下划线',
            },
          ]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          :rules="[{ validator, message: '密码长度必须为5-20个字符' }]"
        />
        <div style="margin: 16px">
          <van-button block type="info" color="#FF6600" @click="sub"
            ><p v-if="pshow">提交</p>
            <van-loading color="#fff" v-if="show"
              >加载中...</van-loading
            ></van-button
          >
        </div>
        <van-checkbox
          class="checkbox"
          v-model="check"
          checked-color="#fff"
          shape="square"
          icon-size="26px"
          >已阅读并同意XXXXX协议</van-checkbox
        >
      </van-form>
    </section>
  </div>
</template>

<script>
import { Toast } from "vant";
import { mapActions, mapMutations } from "vuex";
export default {
  name: "VantLogin",

  data() {
    return {
      username: "user2",
      password: "zcmcss",
      //   此处使用正则校验
      pattern: /^[a-zA-Z]\w{4,17}$/,
      check: true,
      show: false,
      pshow: true,
    };
  },

  mounted() {
    Toast("请先登录");
  },

  methods: {
    ...mapMutations(["login"]),

    // 回退上个页面
    back() {
      this.$router.go(-1);
    },
    iconClick() {
      this.$router.push("/Myfile");
    },
    //   此处使用函数校验
    validator(val) {
      return /^.{5,20}$/.test(val);
    },
    sub() {
      if (!this.check) {
        Toast("请先同意协议");
      } else {
        this.pshow = false;
        this.show = true;
        setTimeout(() => {
          this.$axios({
            method: "post",
            url: "/login",
            data: {
              username: this.username,
              password: this.password,
            },
          })
            .then((result) => {
              console.log(result);
              if (
                this.username === result.data.data.username ||
                this.password === result.data.data.password
              ) {
                Toast("登陆成功！");
                this.$store.dispatch("updateCartList");
                this.login(result.data.data);
                this.$router.push("/Myfile");
              } else {
                Toast("账号或密码不正确，请重新输入");
                this.pshow = true;
                return (this.show = false);
              }
            })
            .catch((err) => {
              console.log("数据请求错误，请联系工作人员");
              return Toast("404,请联系工作人员");
            });
        }, 1000);
        setTimeout(() => {
          this.pshow = true;
          return (this.show = false);
        }, 1500);
      }
    },
  },
};
</script>

<style scoped>
.sub {
  display: flex;
  justify-items: center;
  align-items: center;
  width: 100%;
  height: 45px;
}
.lf {
  flex: 1;
}
.cn {
  text-align: center;
  flex: 1;
}
.rg {
  flex: 1;
}
header {
  color: rgb(178, 178, 178);
  margin: 10px 0 0 0;
  display: flex;
  justify-content: space-between;
}
.left {
  font-size: 20px;
}
.right p {
  font-size: 16px;
}
section {
  margin: 0 auto;
}
section h3 {
  margin: 25px 0 0 20px;
}

::v-deep .van-checkbox__icon--checked .van-icon {
  color: green;
}
.checkbox {
  margin-left: 20px;
}
</style>